import "./index.scss";
import {
  Tabs,
  Space,
  Button,
  Form,
  Input,
  Select,
  DatePicker,
  Table,
  Modal,
  message,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import type { ColumnsType } from "antd/es/table";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "dayjs/locale/zh-cn";
import { CSVLink } from "react-csv";
import locale from "antd/es/date-picker/locale/zh_CN";
import http from "../../../utils/http";
import { Image } from "antd";

const BusinessLicense = () => {
  //时间转换
  const toDub = (n: any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date: any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };
  //年月日
  const toDate = (date: any) => {
    const oDate = new Date(date);
    return (
      oDate.getFullYear() +
      "-" +
      toDub(oDate.getMonth() + 1) +
      "-" +
      toDub(oDate.getDate())
    );
  };

  //切换状态
  const onChange = (key: string) => {
    console.log(key);
  };

  // 待审核表内容
  const [data, setData] = useState([]);
  interface DataType {
    key: string;
    olicense: String;
    oname: String;
    otext: String;
    olicensetype: String;
    ocode: String;
    oexpire: String;
    otime: String;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "营业执照",
      dataIndex: "olicense",
      key: "olicense",
      render: (text) => <Image width={30} height={35} src={text} />,
    },
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "执照类型",
      key: "olicensetype",
      dataIndex: "olicensetype",
    },
    {
      title: "组织机构代码",
      dataIndex: "ocode",
      key: "ocode",
    },
    {
      title: "到期时间",
      dataIndex: "oexpire",
      key: "oexpire",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "action",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              particulars(record);
            }}
            className="excel"
          >
            详情
          </a>
          <a
            onClick={() => {
              showModal2(record);
            }}
            className="noPass"
          >
            不通过
          </a>
          <a
            onClick={() => {
              showModal(record);
            }}
            className="pass"
          >
            通过
          </a>
        </Space>
      ),
    },
  ];
  //待审核渲染内容
  const getData = () => {
    http({
      url: "/getBLOne",
    }).then((res) => {
      console.log("待审核表数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData(_data);
    });
  };
  useEffect(() => {
    getData();
  }, []);
  //详情的跳转
  const navigate = useNavigate();
  const particulars = (record: any) => {
    console.log("record", record);
    navigate("/home/Particulars", { state: record });
  };
  //待审核搜索的表单
  const [searchText] = Form.useForm();
  //待审核搜索
  const onSearch = (search: any) => {
    http({
      url: "/searchBLOne",
      params: {
        oname: search.oname || "",
        ocode: search.ocode || "",
        olicensetype: search.olicensetype || "",
        oexpire:
          toDate(search.oexpire) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.oexpire) || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审核清空搜索
  const clear = () => {
    searchText.resetFields();
    getData();
  };
  //待审核导出excel表
  const toExcel = () => {
    console.log("all", data);
  };
  //通过
  const [isModalOpen, setIsModalOpen] = useState(false);
  //不通过
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  // 通过
  const [val] = Form.useForm();
  const showModal = (record: any) => {
    val.setFieldsValue({ ...record });
    setIsModalOpen(true);
  };
  const handleOk = () => {
    const data = val.getFieldsValue(true);
    http({
      url: "/passOne",
      method: "post",
      data: {
        id: data.id,
        obstate: "待审核",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        setIsModalOpen(false);
        getData();
        getData1();
        getData2();
        getData3();
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //  不通过
  const [val1] = Form.useForm();
  const showModal2 = (record: any) => {
    val1.setFieldsValue({ ...record });
    setIsModalOpen2(true);
  };
  const handleOk2 = () => {
    const data1 = val1.getFieldsValue(true);
    http({
      url: "/nopassOne",
      method: "post",
      data: {
        id: data1.id,
        obstate: "未通过",
        obno: data1.obno,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        setIsModalOpen2(false);
        getData();
        getData1();
        getData2();
        getData3();
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };

  //待审批表内容
  const [data1, setData1] = useState([]);
  interface DataType {
    key: string;
    olicense: String;
    oname: String;
    otext: String;
    olicensetype: String;
    ocode: String;
    oexpire: String;
    otime: String;
  }
  const columns1: ColumnsType<DataType> = [
    {
      title: "营业执照",
      dataIndex: "olicense",
      key: "olicense",
      render: (text) => <Image width={30} height={35} src={text} />,
    },
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "执照类型",
      key: "olicensetype",
      dataIndex: "olicensetype",
    },
    {
      title: "组织机构代码",
      dataIndex: "ocode",
      key: "ocode",
    },
    {
      title: "到期时间",
      dataIndex: "oexpire",
      key: "oexpire",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              particulars1(record);
            }}
            className="excel"
          >
            详情
          </a>
          <a
            onClick={() => {
              showModal22(record);
            }}
            className="noPass"
          >
            不通过
          </a>
          <a
            onClick={() => {
              showModal11(record);
            }}
            className="pass"
          >
            通过
          </a>
        </Space>
      ),
    },
  ];
  //待审批渲染内容
  const getData1 = () => {
    http({
      url: "/getBLTwo",
    }).then((res) => {
      console.log("待审批表数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData1(_data);
    });
  };
  useEffect(() => {
    getData1();
  }, []);
  //待审批详情的跳转
  const particulars1 = (record: any) => {
    navigate("/home/Particulars0", { state: record });
  };
  //待审批搜索的表单
  const [searchText1] = Form.useForm();
  //待审批搜索
  const onSearch1 = (search: any) => {
    http({
      url: "/searchBLTwo",
      params: {
        oname: search.oname || "",
        ocode: search.ocode || "",
        olicensetype: search.olicensetype || "",
        oexpire:
          toDate(search.oexpire) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.oexpire) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData1(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审批清空搜索
  const clear1 = () => {
    searchText1.resetFields();
    getData1();
  };
  //待审批导出excel表
  const toExcel1 = () => {
    console.log("all", data);
  };
  //通过
  const [isModalOpen11, setIsModalOpen11] = useState(false);
  //不通过
  const [isModalOpen22, setIsModalOpen22] = useState(false);
  // 弹框通过
  const [val11] = Form.useForm();
  const showModal11 = (record: any) => {
    val11.setFieldsValue({ ...record });
    setIsModalOpen11(true);
  };
  const handleOk11 = () => {
    const data11 = val11.getFieldsValue(true);
    http({
      url: "/passTwo",
      method: "post",
      data: {
        id: data11.id,
        obstate: "待审批",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        setIsModalOpen11(false);
        getData();
        getData1();
        getData2();
        getData3();
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel11 = () => {
    setIsModalOpen11(false);
  };
  //   弹框不通过
  const [val22] = Form.useForm();
  const showModal22 = (record: any) => {
    val22.setFieldsValue({ ...record });
    setIsModalOpen22(true);
  };
  const handleOk22 = () => {
    const data22 = val22.getFieldsValue(true);
    http({
      url: "/nopassTwo",
      method: "post",
      data: {
        id: data22.id,
        obstate: "待审批",
        obno: data22.obno,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        setIsModalOpen22(false);
        getData();
        getData1();
        getData2();
        getData3();
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel22 = () => {
    setIsModalOpen22(false);
  };

  //已通过表内容
  const [data2, setData2] = useState([]);
  interface DataType {
    key: string;
    olicense: String;
    oname: String;
    otext: String;
    olicensetype: String;
    ocode: String;
    oexpire: String;
    otime: String;
    otop: string;
  }
  const columns2: ColumnsType<DataType> = [
    {
      title: "营业执照",
      dataIndex: "olicense",
      key: "olicense",
      render: (text) => <Image width={30} height={35} src={text} />,
    },
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "执照类型",
      key: "olicensetype",
      dataIndex: "olicensetype",
    },
    {
      title: "组织机构代码",
      dataIndex: "ocode",
      key: "ocode",
    },
    {
      title: "到期时间",
      dataIndex: "oexpire",
      key: "oexpire",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "状态",
      dataIndex: "otop",
      key: "otop",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              particulars2(record);
            }}
            className="excel"
          >
            详情
          </a>
        </Space>
      ),
    },
  ];
  //已通过详情跳转
  const particulars2 = (record: any) => {
    navigate("/home/Particulars1", { state: record });
  };
  //已通过渲染内容
  const getData2 = () => {
    http({
      url: "/getBLThree",
    }).then((res) => {
      console.log("已通过表数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData2(_data);
    });
  };
  useEffect(() => {
    getData2();
  }, []);
  //已通过搜索的表单
  const [searchText2] = Form.useForm();
  //已通过搜索
  const onSearch2 = (search: any) => {
    http({
      url: "/searchBLThree",
      params: {
        oname: search.oname || "",
        ocode: search.ocode || "",
        otop: search.otop || "",
        olicensetype: search.olicensetype || "",
        oexpire:
          toDate(search.oexpire) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.oexpire) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData2(_data);
      } else {
        console.log(res);
        message.error("查询失败");
      }
    });
  };
  //已通过清空搜索
  const clear2 = () => {
    searchText2.resetFields();
    getData2();
  };
  //已通过导出excel表
  const toExcel2 = () => {
    console.log("all", data2);
  };

  //未通过表内容
  const [data3, setData3] = useState([]);
  interface DataType {
    key: string;
    olicense: String;
    oname: String;
    otext: String;
    olicensetype: String;
    ocode: String;
    oexpire: String;
    otime: String;
    obno: String;
  }
  const columns3: ColumnsType<DataType> = [
    {
      title: "营业执照",
      dataIndex: "olicense",
      key: "olicense",
      render: (text) => <Image width={30} height={35} src={text} />,
    },
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
    },
    {
      title: "办学内容",
      dataIndex: "otext",
      key: "otext",
    },
    {
      title: "执照类型",
      key: "olicensetype",
      dataIndex: "olicensetype",
    },
    {
      title: "组织机构代码",
      dataIndex: "ocode",
      key: "ocode",
    },
    {
      title: "到期时间",
      dataIndex: "oexpire",
      key: "oexpire",
      render: (text) => <a className="todate">{toDate(text)}</a>,
    },
    {
      title: "不通过理由",
      dataIndex: "obno",
      key: "obno",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              particulars3(record);
            }}
            className="excel"
          >
            详情
          </a>
        </Space>
      ),
    },
  ];
  //详情跳转
  const particulars3 = (record: any) => {
    console.log("record", record);
    navigate("/home/Particulars1", { state: record });
  };
  //渲染内容
  const getData3 = () => {
    http({
      url: "/getBLFour",
    }).then((res) => {
      console.log("未通过表数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData3(_data);
    });
  };
  useEffect(() => {
    getData3();
  }, []);
  //未通过搜索的表单
  const [searchText3] = Form.useForm();
  //未通过搜索
  const onSearch3 = (search: any) => {
    http({
      url: "/searchBLFour",
      params: {
        oname: search.oname || "",
        ocode: search.ocode || "",
        olicensetype: search.olicensetype || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData3(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //未通过清空搜索
  const clear3 = () => {
    searchText3.resetFields();
    getData3();
  };
  //未通过导出excel表
  const toExcel3 = () => {
    console.log("all", data3);
  };

  return (
    <div className="Box">
      <div className="title">营业执照管理</div>
      <div className="hr"></div>

      {/* 标签页 */}
      <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        items={[
          {
            label: `待审核`,
            key: "1",
            children: (
              <>
                <Form
                  form={searchText}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="提交时间"
                    name="otime"
                    className="Box_form_date"
                  >
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item label="执照类型" name="olicensetype">
                    <Select className="btype">
                      <Select.Option value="营业执照">营业执照</Select.Option>
                      <Select.Option value="民办非企业单位登记证书">
                        民办非企业单位登记证书
                      </Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item name="ocode" label="组织机构代码">
                    <Input />
                  </Form.Item>

                  <Form.Item label="到期时间" name="oexpire">
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item>
                    <Button htmlType="submit" className="btn">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button onClick={clear} className="btn">
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel}>
                      <CSVLink
                        className="excel"
                        data={data}
                        filename="营业执照管理-待审核导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>

                  

                  {/* 弹框通过*/}
                  <Modal
                    title="通过"
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    okText={"确认"}
                    cancelText={"取消"}
                  >
                    <Form form={val}>
                      <div>是否同意该机构的营业执照信息？</div>
                    </Form>
                  </Modal>

                  {/* 弹框不通过 */}
                  <Modal
                    title="不通过"
                    open={isModalOpen2}
                    onOk={handleOk2}
                    onCancel={handleCancel2}
                    okText={"确认"}
                    cancelText={"取消"}
                  >
                    <Form form={val1}>
                      <Form.Item name="obno">
                        <TextArea rows={4} placeholder="请输入不同意理由" />
                      </Form.Item>
                    </Form>
                  </Modal>
                </Form>

                <Table
                  columns={columns}
                  dataSource={data}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />
              </>
            ),
          },
          {
            label: `待审批`,
            key: "2",
            children: (
              <>
                <Form
                  form={searchText1}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch1}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item label="执照类型" name="olicensetype">
                    <Select className="btype">
                      <Select.Option value="营业执照">营业执照</Select.Option>
                      <Select.Option value="民办非企业单位登记证书">
                        民办非企业单位登记证书
                      </Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item name="ocode" label="组织机构代码">
                    <Input />
                  </Form.Item>

                  <Form.Item label="到期时间" name="oexpire">
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item>
                    <Button htmlType="submit" className="btn">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button onClick={clear1} className="btn">
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel1}>
                      <CSVLink
                        className="excel"
                        data={data1}
                        filename="营业执照管理-待审批导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>

                  {/* 弹框通过*/}
                  <Modal
                    title="通过"
                    open={isModalOpen11}
                    onOk={handleOk11}
                    onCancel={handleCancel11}
                    okText={"确认"}
                    cancelText={"取消"}
                  >
                    <Form form={val11}>
                      <div>是否同意该机构的营业执照信息？</div>
                    </Form>
                  </Modal>

                  {/* 弹框不通过 */}
                  <Modal
                    title="不通过"
                    open={isModalOpen22}
                    onOk={handleOk22}
                    onCancel={handleCancel22}
                    okText={"确认"}
                    cancelText={"取消"}
                  >
                    <Form form={val22}>
                      <Form.Item name="obno">
                        <TextArea rows={4} placeholder="请输入不同意理由" />
                      </Form.Item>
                    </Form>
                  </Modal>
                </Form>

                <Table
                  columns={columns1}
                  dataSource={data1}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />
              </>
            ),
          },
          {
            label: `已通过`,
            key: "3",
            children: (
              <>
                <Form
                  form={searchText2}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch2}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="到期时间"
                    name="oexpire"
                    className="Box_form_date"
                  >
                    <DatePicker locale={locale} placeholder="" />
                  </Form.Item>

                  <Form.Item label="执照类型" name="olicensetype">
                    <Select className="btype">
                      <Select.Option value="营业执照">营业执照</Select.Option>
                      <Select.Option value="民办非企业单位登记证书">
                        民办非企业单位登记证书
                      </Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item name="ocode" label="组织机构代码">
                    <Input />
                  </Form.Item>

                  <Form.Item label="状态" name="otop">
                    <Select style={{ width: "200px" }}>
                      <Select.Option value="待颁证">待颁证</Select.Option>
                      <Select.Option value="黑名单">黑名单</Select.Option>
                      <Select.Option value="正常">正常</Select.Option>
                      <Select.Option value="停业整顿">停业整顿</Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item>
                    <Button htmlType="submit" className="btn">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button onClick={clear2} className="btn">
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel2}>
                      <CSVLink
                        className="excel"
                        data={data2}
                        filename="营业执照管理-已通过导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns2}
                  dataSource={data2}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />
              </>
            ),
          },
          {
            label: "未通过",
            key: "4",
            children: (
              <>
                <Form
                  form={searchText3}
                  name="customized_form_controls"
                  layout="inline"
                  onFinish={onSearch3}
                  className="boxBig"
                >
                  <Form.Item name="oname" label="机构名称">
                    <Input />
                  </Form.Item>

                  <Form.Item label="执照类型" name="olicensetype">
                    <Select className="btype">
                      <Select.Option value="营业执照">营业执照</Select.Option>
                      <Select.Option value="民办非企业单位登记证书">
                        民办非企业单位登记证书
                      </Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item name="ocode" label="组织机构代码">
                    <Input />
                  </Form.Item>

                  <Form.Item>
                    <Button htmlType="submit" className="btn">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button onClick={clear3} className="btn">
                      清空查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={toExcel3}>
                      <CSVLink
                        className="excel"
                        data={data3}
                        filename="未通过导出表.csv"
                      >
                        导出结果
                      </CSVLink>
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns3}
                  dataSource={data3}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                />
              </>
            ),
          },
        ]}
      />
    </div>
  );
};
export default BusinessLicense;
